<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body,ul,li {
            margin: 0;
        }
        ul,li {
            padding: 0;
            list-style: none;
        }
        .container {
            width: 1226px;
            height: 460px;
            background-color: rgb(247, 240, 0);
            margin: 0 auto;
        }
        .left-main {
            width: 234px;
            height: 460px;
            background-color: rgba(99, 96, 90,0.7);
            position: relative;
        }
        .box {
            font-size: 14px;
            font-weight: bold;
            color: white;
            padding-top: 10px;
        }
        .box li{

            padding-left: 25px;
            height: 42px;
            line-height: 42px;


        }
        .box li:hover{
            background-color: rgb(255, 103, 0);
        }
        .more {
            position: absolute;
            right: 20px;
        }
        .p-right {
            height: 460px;
            background-color: white;
            position: absolute;
            top:0px;
            left:234px;
            display: none;
            border: 1px solid #cccccc;
            color: #0b2b35;

            min-width: 400px;
        }
        .box li:hover .p-right {
            display: block;
        }
        .half1 {

            width: 992px;
        }
    </style>
</head>
<body>
<h1>aaa</h1>
<h1>aaa</h1>
<h1>aaa</h1>
<div class="container">
    <div class="left-main">
        <ul class="box">
            <li>
                <div>
                    手机 电话卡
                    <span class="more">&gt;</span>
                </div>

                <div class="p-right">aaaaaaaaaaaaaaa</div>
            </li>
            <li>
                笔记本 平板
                <span class="more">&gt;</span>
                <div class="p-right half1">bbbbbbbbbbbbbbbbb</div>
            </li>
            <li>
                电视 盒子
                <span class="more">&gt;</span>
                <div class="p-right">cccccccccccccccccc</div>
            </li>
        </ul>
    </div>

</div>
</body>
</html>